<template>
  <div class="login">
    <div class="left">
      <h4 class="title">后管权限管理demo</h4>
      <img src="@/assets/login-icon/logo.png" class="logo" />
    </div>
    <div class="right">
      <img src="@/assets/login-icon/icon.jpg" class="icon" />
      <div class="content">
        <h2>欢迎登录</h2>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          @keyup.enter.native="submitForm(ruleFormRef)"
        >
          <!-- 用户名表单 -->
          <el-form-item prop="username" :rules="userRules">
            <el-input
              v-model="ruleForm.username"
              type="text"
              clearable
              autocomplete="off"
              :prefix-icon="User"
              :rules="userRules"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <!-- 密码表单 -->
          <el-form-item prop="password" :rules="passwordRules">
            <el-input
              v-model="ruleForm.password"
              type="password"
              clearable
              show-password
              autocomplete="off"
              :prefix-icon="Lock"
              :rules="passwordRules"
              placeholder="请输入密码"
            />
          </el-form-item>
          <!-- 勾选框 -->
          <el-form-item prop="check" :rules="checkBoxRules">
            <el-checkbox-group v-model="ruleForm.check">
              <el-checkbox :rules="checkBoxRules" label="我已阅读并同意" />
            </el-checkbox-group>
            <a href="https://www.chinaacc.com/xieyi/ydkt.shtml"
              >《用户隐私政策》</a
            >
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button
              :loading="isLoading"
              type="primary"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { loginApi } from '@/https/login'
import { useRouter } from 'vue-router'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: 'admin',
  password: 'admin',
  check: [], // 这里不能放布尔值
})
// 校验用户名和密码
const userRules = ref([
  { required: true, message: '用户名不能为空!', trigger: 'blur' },
  { min: 3, max: 9, message: '用户名长度应该为3 ~ 12位', trigger: 'blur' },
])
// 校验密码
const passwordRules = ref([
  { required: true, message: '密码不能为空!', trigger: 'blur' },
  { min: 3, max: 12, message: '密码长度应该为3 ~ 12位', trigger: 'blur' },
  {
    pattern: '^[0-9a-zA-Z]+$',
    message: '密码只能为数字和大小写字母',
    trigger: 'blur',
  },
])
// 校验选择框
const checkBoxRules = ref([
  { required: true, message: '请阅读用户隐私政策并勾选', trigger: 'change' },
])

// 按钮防重点击
const isLoading = ref(false)

const router = useRouter()
// 先前台校验格式，再发请求后端检验数据库
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 防重点击
      isLoading.value = true
      loginApi({ username: ruleForm.username, password: ruleForm.password })
        .then((res: any) => {
          if (res.code === 200 && res.token) {
            sessionStorage.setItem('token', res.token) // 获取token做判断
            sessionStorage.setItem('userInfo', ruleForm.username) // 获取用户身份信息
            router.replace('/dashboard')
            alert('登录成功')
          } else {
            alert('登录不行')
          }
        })
        .finally(() => {
          isLoading.value = false
        })
    } else {
      // 校验不通过直接返回，不发送请求
      console.log('用户名或格式校验不通过!')
      return false
    }
  })
}
</script>

<style scoped lang="scss">
.login {
  display: flex;
  height: 100%;

  .left {
    background: #2984f8;
    width: 65%;
    height: 100%;
    position: relative;

    .title {
      color: white;
      margin-left: 10px;
    }

    .logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .right {
    height: 100%;
    flex: 1;
    position: relative;

    .icon {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 30%;
      width: 50px;
    }

    .content {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 35%;
      box-sizing: border-box;
    }
  }
}

.el-button {
  width: 100%;
}

.el-form {
  height: 100%;
}

.el-form-item {
  margin: 0 auto;
  margin-bottom: 20px;
  width: 300px;
}
</style>
